<template>
  <Navbar2></Navbar2>
  <a-layout-content style="padding: 70px 50px">
    <!--      <a-breadcrumb style="margin: 16px 0">-->
    <!--        <a-breadcrumb-item>Home</a-breadcrumb-item>-->
    <!--        <a-breadcrumb-item>ProjectList</a-breadcrumb-item>-->

    <!--&lt;!&ndash;        <a-breadcrumb-item>App</a-breadcrumb-item>&ndash;&gt;-->
    <!--      </a-breadcrumb>-->
    <BreadCrumbShow :navgation-index="2"></BreadCrumbShow>

    <div :style="{ background: '#fff', padding: '24px', minHeight: '880px' }">
      <div class="container-fluid project">
        <div style="margin: 10px 0;">

          <!--            <a-button type="primary" @click="showAddProj"><PlusCircleFilled />新建项目</a-button>-->

          <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#exampleModal">
            <PlusCircleFilled/>
            新建项目
          </button>

        </div>

        <!--    Modal-->
        <!--          <a-modal id="addModal" v-model:open="open" title="添加项目" :confirm-loading="confirmLoading" @ok="projectAdd">-->
        <!--            <a-divider orientation="left" dashed>项目名称</a-divider>-->
        <!--            <a-input v-model:value="projectName" placeholder="项目名称" allow-clear show-count :maxlength="20" />-->
        <!--            <a-divider orientation="left" dashed>项目简介</a-divider>-->
        <!--            <a-textarea v-model:value="projectRemark" placeholder="项目简介" allow-clear show-count :maxlength="200"/>-->
        <!--            <a-divider dashed></a-divider>-->


        <!--          </a-modal>-->

      <ProjectPrompt></ProjectPrompt>

        <div style="background-color: #ececec; padding: 20px">
          <a-row :gutter="16" style="margin-bottom:-20px">
            <a-col :span="6" v-for="p in this.projectList">
              <a-card hoverable :loading="loading" style="margin-bottom: 20px" :bordered="true">
                <router-link :to="{path:'/dashboard',query:{pid:p.id}}" @click="this.projClick(p.id)">
                  <template #cover>

                    <a-image preview-mask="false" style="width: 100%"
                             :alt="p.name"
                             src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"></a-image>

                  </template>
                  <a-card-meta :title="p.name" :description="p.remark" style="max-height: 50px;">
                    <template #avatar>
                      <a-avatar src="#"/>
                      <br>
                      {{ p.creatorName }}
                    </template>
                  </a-card-meta>
                </router-link>

                <template #actions>
                  <setting-outlined key="setting"/>
                  <edit-outlined key="edit"/>
                  <ellipsis-outlined key="ellipsis"/>
                </template>

              </a-card>

            </a-col>
          </a-row>
        </div>


      </div>

    </div>


  </a-layout-content>


</template>

<script>
import {PlusCircleFilled} from '@ant-design/icons-vue';
import {addProj, getProjList} from "@/api/project.js";
import {toRaw} from "vue";
import {loginPass} from "@/api/auth.js";
import {setToken} from "@/utils/auth.js";
import Navbar2 from "@/views/components/Navbar2.vue";
import {mapActions} from "vuex";
import BreadCrumbShow from "@/views/components/BreadCrumbShow.vue";
import ProjectPrompt from "@/views/project/ProjectPrompt.vue";

export default {
  name: "ProjectList",
  components: {ProjectPrompt, BreadCrumbShow, Navbar2},
  // props:{
  //   projectList: {
  //     type: Array,
  //     default: []
  //   }
  // },
  data() {
    return {
      open: false,
      confirmLoading: false,
      projectList: [],
      projectName: null,
      projectRemark: null,
      loading: true
    }
  },
  methods: {
    ...mapActions([
      'navigationChange',
      'projectChange'
    ]),
    projClick(pid){
      this.projectChange(pid)
    },
    toProject(pid) {
      console.log('to dashboard')
      // this.$router.push(`/dashboard/${pid}/`);
      this.$router.push(`/dashboard`);
    },
    projectFormClear() {
      this.projectName = null
      this.projectRemark = null
    },
    async projectAdd() {
      this.confirmLoading = true
      let result = await addProj({'name': this.projectName, 'remark': this.projectRemark}).then(res => {
        const {data} = res
        if (data.code === 200) {
          layer.msg('新增成功')
          this.confirmLoading = false
          console.log('data', data)
          this.open = false
          window.location.reload()
        } else {
          layer.msg(data.data)
          this.open = false
          this.confirmLoading = false
        }
      }).catch(e => {
        layer.msg('e>>' + e + 'retry again')
        this.open = false
        this.confirmLoading = false
      })
      if (result) {
        console.log('result ', result)
      }
    },
    showAddProj() {
      this.open = true
    },
    ellipsisText(text) {
      return text
    },
    async fetchProjList() {
      let load = layer.load(1);
      let result = await getProjList().then(res => {
        const {data} = res
        console.log('res data > ', data)
        if (data.code === 200) {
          layer.msg('查询成功')
          layer.close(load)
          this.loading = false
          return data
        } else {
          layer.msg('not200:' + data.data)
          layer.close(load)
        }
      }).catch(e => {
        layer.msg('catch e:' + e)
        layer.close(load)
      })
      if (result) {
        console.log('result ', result)
        this.projectList = Object.assign({}, result.data);
      }
    },


  },
  created() {
    this.navigationChange('2')
    this.fetchProjList()
    console.log('projectList ', this.projectList)
  },
  computed() {
    // this.fetchProjList()
  }
}
</script>

<style scoped>
.project {
  margin-top: 10px;
}

.panel-body {
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: flex-start;
  flex-wrap: wrap;
}

.panel-body > .item {
  border-radius: 6px;
  width: 228px;
  border: 1px solid #dddddd;
  margin: 20px 10px;

}

.panel-body > .item:hover {
  border: 1px solid #f0ad4e;
}

.panel-body > .item > .title {
  height: 104px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  font-size: 15px;
  text-decoration: none;
}

.panel-body > .item > .info {
  padding: 10px 10px;

  display: flex;
  justify-content: space-between;

  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  color: #8c8c8c;

}

.panel-body > .item > .info a {
  text-decoration: none;
}

.panel-body > .item > .info .fa-star {
  font-size: 18px;
}

.color-radio label {
  margin-left: 0;
  padding-left: 0;
}

.color-radio input[type='radio'] {
  display: none;
}

.color-radio input[type='radio'] + .cycle {
  display: inline-block;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 2px solid #dddddd;
}

.color-radio input[type='radio']:checked + .cycle {
  border: 2px solid black;
}
</style>
